<template>
  <div id="goods_id">
    <el-dialog title="提示" :visible.sync="isShow.flig" fullscreen>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基础信息" name="first">
          <el-form
            v-model="ruleForm"
            ref="ruleForm"
            style=" text-align: left;"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="一级分类" prop="first_cateid">
              <el-select v-model="ruleForm.first_cateid" placeholder="请选择" @change="change_cate">
                <el-option
                  :label="cate.catename"
                  :value="cate.id"
                  v-for="cate in category_list"
                  :key="cate.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="二级分类" prop="second_cateid">
              <el-select v-model="ruleForm.second_cateid" placeholder="请选择">
                <el-option
                  :label="cate.catename"
                  :value="cate.id"
                  v-for="cate in second_cate_list"
                  :key="cate.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="商品名称" prop="goodsname">
              <el-input v-model="ruleForm.goodsname"></el-input>
            </el-form-item>

            <el-form-item label="零售价格" prop="price">
              <el-input v-model="ruleForm.price"></el-input>
            </el-form-item>

            <el-form-item label="市场价格" prop="market_price">
              <el-input v-model="ruleForm.market_price"></el-input>
            </el-form-item>

            <el-form-item label="商品图片">
              <el-upload class="avatar-uploader" action :on-change="handleAvatarChange">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>

            <el-form-item label="规格名称" prop="specsid">
              <el-select v-model="ruleForm.specsid" placeholder="请选择" @change="change_specs">
                <el-option
                  :label="space.specsname"
                  :value="space.id"
                  v-for="space in space_list"
                  :key="space.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="规格属性" prop="specsattr">
              <el-select v-model="ruleForm.specsattr" placeholder="请选择">
                <el-option :label="attr" :value="attr" v-for="attr in space_attr_list" :key="attr"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="是否热卖" prop="ishot">
              <el-radio-group v-model="ruleForm.ishot">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="是否新品" prop="isnew">
              <el-radio-group v-model="ruleForm.isnew">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="商品状态" prop="status">
              <el-radio-group v-model="ruleForm.status">
                <el-radio :label="1">正常</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!-- 商品详情 -->
        <el-tab-pane label="商品详情" name="description">
          <wangeditor ref="editor_ref" width="100%" height="500" id="description"></wangeditor>
        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button @click='handleClose'>取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import wangeditor from "vue-wangeditor";
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      activeName: "first",
      second_cate_list: [],
      space_list: [],
      space_attr_list: [],
      imageUrl: "",
      ruleForm: {
        id: 0,
        first_cateid: "",
        second_cateid: "",
        goodsname: "",
        price: "",
        market_price: "",
        specsid: "",
        specsattr: "",
        ishot: 2,
        isnew: 2,
        status: 1,
        img: "",
        description: ""
      }
    };
  },
  created() {
    this.CategoryAction();
    this.getSpace();
  },
  methods: {
    change_specs(id) {
      this.space_list.forEach(obj => {
        if (obj.id == id) {
          this.space_attr_list = obj.attrs;
          return "";
        }
      });
    },
    change_cate(id) {
      this.category_list.forEach(obj => {
        if (obj.id == id) {
          this.second_cate_list = obj.children;
          return "";
        }
      });
    },
    getSpace() {
      this.$http.get("/specslist").then(res => {
        if (res.code == 200) {
          this.space_list = res.list;
        }
      });
    },
    handleClick() {},
    ...mapActions("CategoryStory", ["CategoryAction"]),
    handleAvatarChange(file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.ruleForm.img = file.raw;
    },
    handleClose() {
      this.ruleForm = {
        id: 0,
        first_cateid: "",
        second_cateid: "",
        goodsname: "",
        price: "",
        market_price: "",
        specsid: "",
        specsattr: "",
        ishot: 2,
        isnew: 2,
        status: 1,
        img: "",
        description: ""
      };
      this. imageUrl= "",
      this.isShow.flig = false;
    },
    set_list(obj){
      console.log(obj,'1111111111');
      this.ruleForm={...obj}
      
      this.imageUrl = 'http://localhost:3000'+ obj.img
      setTimeout(()=>{ 
        this.$refs.editor_ref.setHtml(this.ruleForm.description) },200) 
    },
    submit() {
      this.ruleForm.description = this.$refs.editor_ref.getHtml();
      var sendData = new FormData();

      for (let i in this.ruleForm) {
        sendData.append(i, this.ruleForm[i]);
      }
      var url ="/goodsadd"
      if(this.ruleForm.id !=0){
        url ="/goodsedit"
      }
      this.$http.post(url, sendData).then(res => {
        if (res.code == 200) {
          this.handleClose();
          this.$emit("reload_goods");
        }
      });
    }
  },
  computed: {
    ...mapState({ category_list: state => state.CategoryStory.category_list })
  },
  components: {
    wangeditor
  },
  props: ["isShow"]
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

















  